<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>校园BBS</title>
    <link rel="icon" href="../assets/QQ.ico">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/base.css">
</head>

<body>
<div id="app">
    <div id="header">
        <div class="title">校园BBS系统</div>
        <div class="login" id="header-login">
            <div v-if="!isLogin">
                您尚未
                <a href="login.html">登录</a>
            </div>
            <div v-else="isLogin" style="display: flex;justify-content: center;flex-direction: column; align-items: flex-start;font-size: 15px;line-height: 25px;">
                <div style="display: flex;justify-content: center;align-items: center;">头像:<img :src="imgUrl" style="width: 50px;height: 50px;border-radius: 50%;margin-left: 20px"></img></div>
                <div style="display: flex;justify-content: center;align-items: center;">用户名:<span style="font-size: 1.5rem;color: #f56c6c;margin-left: 20px;">{{userInfo.userName}}</span></div>
                <a @click="logout" id="logout">退出登录</a>
            </div>
        </div>
    </div>
    <div id="board-block">
        <div class="path">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="item in topTitle" :key="item.priority"><a :href="item.url">{{item.title}}</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table
                :data="board"
                style="width: 100%;margin-bottom: 40px"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column label="图标" type="index">
                <template slot-scope="scope">
                    <img :src="scope.row.boardImg"/>
                </template>
            </el-table-column>
            <el-table-column
                    label="板块名称"
                    width="180">
                <template slot-scope="scope">
                    <a v-if="scope.row.parentId === '0'">{{scope.row.boardName}}</a>
                    <a @click="toPageWithParams(`${scope.row.id}`,`${scope.row.boardName}`)" v-else="scope.row.parentId != '0'">{{scope.row.boardName}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    label="主题">
                <template slot-scope="scope" >
                        <span v-for="topic in scope.row.topic" :key="topic.topicId" id="topicStyle">
                            {{topic.title}}
                            <p/>
                        </span>
                </template>
            </el-table-column>
            <el-table-column
                    label="最后一次修改时间"
                    align="center"
                    width="250">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/index.js"></script>
<script src="../api/base.js"></script>

</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isLogin: false,
                userInfo:{
                    userId:'',
                    userName:'',
                    head:'',
                    gender: '',
                    createTime:'',
                },
                imgUrl:'',
                topTitle:[
                    {
                        title:'首页',
                        url:'index.html',
                        priority:'1'
                    }
                ],
                topicStyle: {

                },
                board: []
            }
        },
        created(){
            this.init();
        },
        mounted(){

        },
        methods:{
            async init(){
                //初始化用户信息
                const userInfo = localStorage.getItem('userInfo')
                let user = JSON.parse(userInfo)
                if (user != null){
                    this.isLogin = true
                    this.userInfo = user
                    this.imgUrl = `/common/download?name=${this.userInfo.head}`
                }
                //初始化板块信息
                await getBoardInfoApi().then(res=>{
                    if (String(res.code) === '1') {
                        for (const d of res.data) {
                            if (String(d.parentId) === '0'){
                                this.board.push(this.joinTable(d,res.data))
                            }
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.$message.error('请求出错了：' + err)
                })


            },
            async logout(){
                await logoutApi().then((res)=>{
                    if(res.code === 1){
                        localStorage.removeItem('userInfo')
                        window.location.href = './login.html'
                    }
                })
            },
            joinTable(item,all){
                item.children = []
                item.topic = []
                getTopicInfoApi(item.id).then(res=>{
                    if (String(res.code) ==='1'){
                        for (const i of res.data) {
                            item.topic.push(i)
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{
                    this.$message.error('请求出错了：' + err)
                })
                for (const i of all) {
                    if (i.parentId === item.id){
                        item.children.push(this.joinTable(i,all))
                    }
                }
                item.boardImg = `/common/download?name=${item.boardImg}`
                return item
            },
            toPageWithParams(id,boardName){
                if (id){
                    localStorage.setItem("boardId",id)
                }
                if (boardName){
                    localStorage.setItem("boardName",boardName)
                }
                window.open("./list.html","_self")
            },

        }
    })
</script>

</html>